<#macro treeOrg treeId="treeId" treeUrl="" >
	<div id="${treeId}">
		<#nested>
	</div>
	
	<script type="text/javascript">
	var ${treeId}_setting = {
	    view: {
	    	dblClickExpand: false,
	        showLine: false,
	        nameIsHTML: true,
	        showIcon: function(treeId, treeNode) {
	        	return !treeNode.isParent;
	        },
	        fontCss: function(treeId, treeNode) {
	        	return (!!treeNode.highlight) ? {
	                "color": "#4A9D00",
	                "font-weight": "bold"
	            } : {
	                color: "#333",
	                "font-weight": "normal"
	            };
	        }
	    },
	    data: {
	        simpleData: {
	            enable: true,
	            idKey: "id",
	            pIdKey: 'pid'
	        },
	        key: {
	            url: '_url',
	        }
	    },
	    callback: {
	        onClick: function(event, treeId, treeNode) {
	        	if ($("#pageListBox").size() > 0) {
	        		if (!$("#pageListBox").attr("data-origin-url")) {
	        			$("#pageListBox").attr("data-origin-url", $("#pageListBox").attr("data-url"));
	        		}
	        		$("#pageListBox").attr("data-url", $("#pageListBox").attr("data-origin-url") + treeNode.id);
	        		page.initNo();
	        		page.search();
	        	}
	        }
	    }
	};
	
	$(function () {
		ajax.getData("${treeUrl}", {}, function(data) {
			$.fn.zTree.init($("#${treeId} .tree-box"), ${treeId}_setting, data);
		});
	});
	
	</script>
</#macro>


<#macro treeSelect treeId="treeId" treeUrl="" fn="">
	<div id="${treeId}">
		<#nested>
		<div class="ztree-select-box none" id="${treeId}-box">
	         <input type="text" class="tree-search-input form-control"
	                placeholder="请输入关键词">
	         <ul id="${treeId}-tree" class="ztree-select" style="height:300px;">
	             <p class="loading-info">数据加载中，请稍等</p>
	         </ul>
	     </div>
	</div>
	
	<script type="text/javascript">
	var ${treeId}_setting = {
	    view: {
	        dblClickExpand: false,
	        showLine: false,
	        nameIsHTML: true,
	        showIcon: function(treeId, treeNode) {
	        	return !treeNode.isParent;
	        },
	        fontCss: function(treeId, treeNode) {
	        	return (!!treeNode.highlight) ? {
	                "color": "#4A9D00",
	                "font-weight": "bold"
	            } : {
	                color: "#333",
	                "font-weight": "normal"
	            };
	        }
	    },
	    data: {
	        simpleData: {
	            enable: true,
	            idKey: "id",
	            pIdKey: 'pid'
	        },
	        key: {
	            url: '_url',
	        }
	    },
	    callback: {
	        onClick: function(event, treeId, treeNode) {
	        	$("#${treeId} .tree-id").val(treeNode.id);
	        	$("#${treeId} .tree-name").val(treeNode.name);
	        	$("#${treeId} #${treeId}-box").hide();
	        	
	        	<#if fn?? && fn!="" >
	        		window['${fn}'](treeNode);
	        	</#if>
	        }
	    }
	};
	
	$(function () {
		ajax.getData("${treeUrl}", {}, function(data) {
			$.fn.zTree.init($("#${treeId}-tree"), ${treeId}_setting, data);
			fuzzySearch('${treeId}-tree', '#${treeId} .tree-search-input', false, true, false);
		});
		
		$("#${treeId} .tree-operate").click(function(event) {
			if ($("#${treeId} #${treeId}-box").is(":hidden")) {
				$("#${treeId} #${treeId}-box").show();
				
				$(document).one("click", function() {
					$("#${treeId} #${treeId}-box").hide();
		        });
		    } else {
		    	$("#${treeId} #${treeId}-box").hide();
		    }
			event.stopPropagation();
		});
		
		$("#${treeId} #${treeId}-box").click(function(event) {
	        event.stopPropagation();
	    });
	});
	
	</script>
</#macro>

<#macro treeTable treeId="treeTable" searchBtnId="" searchInputId="" >
	<div id="${treeId}">
		<#nested>
	</div>
	
	<script type="text/javascript">
	$(function () {
	    ${treeId}_treetable = $("#${treeId} table");
		${treeId}_treetable.treetable({  
	        expandable : true,
	        initialState:"expanded",
	        clickableNodeNames:false,//点击节点名称也打开子节点.
	        indent : 30//每个分支缩进的像素数。
	    });
		
		<#if searchBtnId != "" && searchInputId != "">
		treetable.searchNode($("#${searchBtnId}"), $("#${searchInputId}"));
		</#if>
	});
	
	var treetable = {
		searchNode : function(btn, input) {
			btn.click(function() {
				var val = $.trim(input.val()); 
			    if (val == "") {
			    	treetable.showAll();
			    	return;
			    }
			    
			    ${treeId}_treetable.find("tbody tr").hide();
			    ${treeId}_treetable.find("tbody tr").each(function() {
			    	if ($(this).attr("data-tt-key").indexOf(val) >= 0) {
			    		treetable.showNode($(this).attr("data-tt-id"));
			    	}
			    });
			});
		},
		showNode : function(id) {
			var tr = ${treeId}_treetable.find("tbody tr[data-tt-id='"+id+"']");
			if (tr) {
				tr.show();
				if (tr.attr("data-tt-parent-id") && tr.attr("data-tt-parent-id") != "0") {
					${treeId}_treetable.treetable("expandNode", tr.attr("data-tt-parent-id"));
					treetable.showNode(tr.attr("data-tt-parent-id"));
				}
			}
		},
		showAll : function() {
			${treeId}_treetable.find("tbody tr").show();
	    	${treeId}_treetable.treetable("expandAll");
		}
	}
	</script>
</#macro>